<template>
    <div id="pinglun">
        <ul id="pl_ul">
            <li class="pl-li qu">全部1050</li>
            <li class="pl-li">满意999</li>
            <li class="pl-li cha">不满意17</li>
            <li class="pl-li">有图40</li>
            <li class="pl-li">味道好62</li>
            <li class="pl-li">送货快18</li>
        </ul>
        <p id="pl_p1"><span @click='xz' :class="{xzs:aa}" class="iconfont">&#xe610;</span> 只看有内容的评价</p>
        <ul id="pl_ul2">
            <li class="pl-li2">
                <div class="pl-dv1">
                    <div class="pl-dv2"><img src="//fuss10.elemecdn.com/5/8a/c1ad764becd9dfc4878f4f23f6e9bjpeg.jpeg?imageMogr/format/webp/thumbnail/!33.12x33.12r/gravity/Center/crop/33.12x33.12/" alt=""></div>
                    <div class="pl-dv3">
                        <div class="pl-dv4">
                            <h3>遥***界</h3><small>2018-7-14</small></div>
                        <div class="pl-dv5"><span class="iconfont pl-span1">&#xe616;&#xe616;&#xe616;&#xe616;&#xe616;</span><span class="pl-span2">超赞</span></div>
                        <div class="pl-dv6">好吃。。。。。。。。。。。。。。</div>
                        <div class="pl-dv7">
                            商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务 ，我们会继续努力，为您提供更好的服务。祝您生活愉快！
                        </div>
                        <ul id="pl_ul3">
                            <li class="pl-li3"><img src="//fuss10.elemecdn.com/9/70/36fd36f77fc5f3fab98c485697c4cjpeg.jpeg?imageMogr/format/webp/thumbnail/300x/" alt=""></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="pl-li2">
                <div class="pl-dv1">
                    <div class="pl-dv2"><img src="//fuss10.elemecdn.com/5/8a/c1ad764becd9dfc4878f4f23f6e9bjpeg.jpeg?imageMogr/format/webp/thumbnail/!33.12x33.12r/gravity/Center/crop/33.12x33.12/" alt=""></div>
                    <div class="pl-dv3">
                        <div class="pl-dv4">
                            <h3>遥***界</h3><small>2018-7-14</small></div>
                        <div class="pl-dv5"><span class="iconfont pl-span1">&#xe616;&#xe616;&#xe616;&#xe616;&#xe616;</span><span class="pl-span2">超赞</span></div>
                        <div class="pl-dv6">好吃。。。。。。。。。。。。。。</div>
                        <div class="pl-dv7">
                            商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务 ，我们会继续努力，为您提供更好的服务。祝您生活愉快！
                        </div>
                        <ul id="pl_ul3">
                            <li class="pl-li3"><img src="//fuss10.elemecdn.com/9/70/36fd36f77fc5f3fab98c485697c4cjpeg.jpeg?imageMogr/format/webp/thumbnail/300x/" alt=""></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="pl-li2">
                <div class="pl-dv1">
                    <div class="pl-dv2"><img src="//fuss10.elemecdn.com/5/8a/c1ad764becd9dfc4878f4f23f6e9bjpeg.jpeg?imageMogr/format/webp/thumbnail/!33.12x33.12r/gravity/Center/crop/33.12x33.12/" alt=""></div>
                    <div class="pl-dv3">
                        <div class="pl-dv4">
                            <h3>遥***界</h3><small>2018-7-14</small></div>
                        <div class="pl-dv5"><span class="iconfont pl-span1">&#xe616;&#xe616;&#xe616;&#xe616;&#xe616;</span><span class="pl-span2">超赞</span></div>
                        <div class="pl-dv6">好吃。。。。。。。。。。。。。。</div>
                        <div class="pl-dv7">
                            商家回复：亲爱的顾客，感谢您选择品尝本店的美食，谢谢您认可我们的口味和服务 ，我们会继续努力，为您提供更好的服务。祝您生活愉快！
                        </div>
                        <ul id="pl_ul3">
                            <li class="pl-li3"><img src="//fuss10.elemecdn.com/9/70/36fd36f77fc5f3fab98c485697c4cjpeg.jpeg?imageMogr/format/webp/thumbnail/300x/" alt=""></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                aa: false
            }
        },
        methods: {
            xz() {
                this.aa = !this.aa
                console.log(1)
            }
        }
    }
</script>
<style lang="stylus" scoped>
    #pinglun
        background-color #fff
        padding 2.666667vw 3.2vw 0
        font-size .36rem
        #pl_ul
            padding-bottom 2.666667vw
            border-bottom 1px solid #eee
            .pl-li
                display inline-block
                padding 0 2.4vw
                height 7.466667vw
                line-height 7.466667vw
                margin .933333vw
                font-size .32rem
                border-radius .533333vw
                color #6d7885
                background-color #ebf5ff
            .qu
                color #fff
                background-color #0097ff
            .cha
                color #aaa
                background-color #f5f5f5
        #pl_p1
            display flex
            align-items center
            padding-left 4vw
            height 10.666667vw
            color #666
            border-bottom .133333vw solid #eee
            .xzs
                color #76d572
        #pl_ul2
            .pl-li2
                padding 4vw 0 3.2vw
                border-bottom .133333vw solid #eee
                .pl-dv1
                    position relative
                    padding-left 1.066667rem
                    padding-left 10.666667vw
                    .pl-dv2
                        position: absolute;
                        top 0
                        left 0
                        // width 99px
                        // height 99px
                        border-radius 50%
                    .pl-dv2
                        img
                            border-radius 50%
                    .pl-dv3
                        font-size .346667rem
                        .pl-dv4
                            display flex
                            align-items center
                            justify-content space-between
                        .pl-dv4
                            h3
                                font-size: .346667rem;
                                margin-top: 0;
                                color: #333;
                                margin-right: 1.6vw
                                // color #f00
                            small
                                font-size .293333rem
                                color #999
                        .pl-dv5
                            display flex
                            align-items center
                            margin 1.6vw 0 .533333vw
                            .pl-span1
                                color #ffb712
                                font-size .09rem
                            .pl-span2
                                font-size .293333rem  
                                margin-left 1.066667vw
                                color #ff6000
                        .pl-dv6
                            color #333
                            font-size .373333rem
                            margin .213333rem 0
                            margin 2.133333vw 0
                        .pl-dv7
                            position relative
                            margin 2.666667vw 0
                            padding 2.666667vw
                            background #f3f3f3
                            border-radius 1.066667vw
                        #pl_ul3
                            margin-top 1.066667vw
                            margin-bottom 3.2vw
                            .pl-li3
                                display inline-block
                                margin 0 .533333vw
                            .pl-li3
                                img
                                    width 40vw
                                    height 40vw


</style>
